<script setup>
import { ref } from 'vue'

import Root from './components/Root.vue'
import ClassStyle from './components/ClassStyle.vue'
import ConditionalRendering from './components/ConditionalRendering.vue'
import ListRendering from './components/ListRendering.vue'
import EventProcessing from './components/EventProcessing.vue'
import FormProcessing from './components/FormProcessing.vue'
import ButtonCounter from './components/ButtonCounter.vue'
import BlogPost from './components/BlogPost.vue'
import AlertBox from './components/AlertBox.vue'
import LifeCycle from './components/LifeCycle.vue'
import ListenerBox from './components/ListenerBox.vue'

const posts = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])
const currentTab = ref('LifeCycle')

const tabs = {
  Root,
  ClassStyle,
  ConditionalRendering,
  ListRendering,
  EventProcessing,
  FormProcessing,
  ButtonCounter,
  BlogPost,
  AlertBox,
  LifeCycle,
  ListenerBox
}



function ChangeComponents(event){
  currentTab.value = event.target.innerHTML
}

</script>

<template>


<button 
v-for="(value,key) in tabs"
:key="key"
@click="ChangeComponents"
>{{ key }}</button>



<div>
  <component :is="tabs[currentTab]"></component>
</div>



</template>

<style scoped>
hr{
  margin:1em 0 1.5em 0
}


</style>